import { Fragment } from '@/components/Fragment'; 
import { Badge, View } from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

import { BadgeDemo } from './demo';
import {
  DefaultBadgeExample,
  BadgeVariationExample,
  BadgeSizeExample,
  BadgeStyleProps,
  BadgeThemeExample,
} from './examples';

## Demo

<BadgeDemo />

## Usage

Import the Badge primitive and styles.

<Example>
  <View>
    <DefaultBadgeExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DefaultBadgeExample.tsx

```

  </ExampleCode>
</Example>

### Variations

Use the `variation` prop to change the Badge variation. Available options are `info`, `error`, `warning`, `success`, and none (default).

<Example direction="row">
  <View>
    <BadgeVariationExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BadgeVariationExample.tsx

```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the Badge size. Available options are `small`, `large`, and none (default).

<Example>
  <View>
    <BadgeSizeExample />
  </View>
  
  <ExampleCode>

```tsx file=./examples/BadgeSizeExample.tsx

```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Badge">
  <Example>
    <BadgeThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/BadgeThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>


### Target classes

<ComponentStyleDisplay componentName="Badge" />

### Global styling

To override styling on all Badges, you can set the Amplify CSS variables or use the built-in `.amplify-badge` class.

<ExampleCode>

```css
/* styles.css */
[data-amplify-theme] {
  --amplify-components-badge-background-color: yellow;
}
/* OR */
.amplify-badge {
  background-color: yellow;
}
```

</ExampleCode>

To replace the Badge styling, unset it:

<ExampleCode>

```css
.amplify-badge {
  all: unset;
  /* Add your styling here*/
}
```

</ExampleCode>

### Local styling

To override styling on a specific Badge, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <View>
    <Badge className="flagged">13</Badge>
  </View>
  
  <ExampleCode>

```css
/* styles.css */
.flagged {
  color: white;
  background-color: crimson;
  border-radius: 3px;
}
```

</ExampleCode>
<ExampleCode>

```jsx
import './styles.css';

<Badge className="flagged">13</Badge>;
```

  </ExampleCode>
</Example>

_Using data attributes:_

```css
/* styles.css */
/* Override only info variation styles */
.amplify-badge[data-variation='info'] {
  background-color: rebeccapurple;
}

/* Override only large size styles */
.amplify-badge[data-size='large'] {
  border: 1px solid black;
}
```

```jsx
import './styles.css';

<Badge variation="info">Purple background</Badge>
<Badge size="large">Black border</Badge>
```

_Using style props:_

<Example>
  <View>
    <BadgeStyleProps />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BadgeStyleProps.tsx

```

  </ExampleCode>
</Example>